<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            background-image: url('beijing.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            height: 100vh;
        }
        .overlay {
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        .login-container {
            max-width: 400px;
            margin: auto;
            padding: 20px;
            border: none;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.9);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            position: relative;
            z-index: 2;
        }
        .form-control {
            border-radius: 30px;
            padding: 15px;
            font-size: 16px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .btn-primary {
            border-radius: 30px;
            padding: 10px 20px;
            background-color: #0072ff;
            border: none;
            transition: background-color 0.3s;
        }
        .btn-primary:hover {
            background-color: #0056b3;
        }
        .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            font-size: 14px;
            z-index: 2;
        }
        .logo {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 240px;
            height: auto;
            z-index: 2;
        }
        /* 提示文本样式 */
        .hint-text {
            font-size: 1.5em;
            font-weight: bold;
            color: #0072ff;
            text-align: center;
            padding: 20px;
            line-height: 1.5;
            transition: opacity 0.5s ease-in-out;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

<!-- 背景的黑色遮罩层 -->
<div class="overlay"></div>

<!-- 左上角的 logo 图片 -->
<img src="logo.png" alt="Logo" class="logo">

<div class="container mt-5">
    <!-- 提示文本容器 -->
    <div class="hint-text">欢迎来到天津科技大学论文期刊管理系统</div>

    <div class="login-container">
        <h2 class="text-center">用户登录</h2>
        <!-- 显示错误信息 -->
        <div id="error-message" class="alert alert-danger" role="alert" style="display:none;"></div>
        <form id="login-form">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
            </div>
            <button type="submit" class="btn btn-primary btn-block">登录</button>
        </form>
        <div class="text-center mt-3">
            <a href="register.html">没有账户？注册</a>
        </div>
    </div>
</div>
<!-- 版权声明 -->
<div class="footer">
    版权所有 © 2024 TUST 计算机科学与探索期刊管理系统
</div>

<!--<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>-->
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.6.2/js/bootstrap.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    const hintText = document.querySelector('.hint-text');
    const hints = [
        "欢迎来到我们的论文期刊管理系统！！！",
        "请在这里登录进入",
        "希望您体验满意！！！"
    ];
    let hintIndex = 0;

    function changeHintText() {
        hintText.style.opacity = 0;  // 开始淡出

        setTimeout(() => {
            hintIndex = (hintIndex + 1) % hints.length;  // 更新提示索引
            hintText.textContent = hints[hintIndex];  // 更换文本
            hintText.style.opacity = 1;  // 淡入新文本
        }, 500);  // 500ms 等待淡出完成
    }

    setInterval(changeHintText, 3000);  // 每隔 3 秒更换一次文本








    $(document).ready(function() {
        $("#login-form").on("submit", function(event) {
            event.preventDefault(); // 防止默认表单提交

            // 获取表单数据
            const username = $("#username").val();
            const password = $("#password").val();

            // 发送 Ajax 请求
            $.ajax({
                url: "/user/login", // 后端登录接口
                method: "POST",
                contentType: "application/json",
                data: JSON.stringify({
                    username: username,
                    password: password
                }),
                success: function(response) {
                    alert(response); // 提示登录成功
                    window.location.href = "home.html"; // 登录成功后跳转到主页
                },
                error: function(xhr) {
                    let errorMessage = "登录失败";
                    if (xhr.status === 401) {
                        errorMessage = xhr.responseText; // 从响应中获取具体错误信息
                    }
                    $("#error-message").text(errorMessage).show(); // 显示错误信息
                }
            });
        });
    });
</script>
</body>
</html>
